﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>groupDetail</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
    <script src="/js/data.js"></script>
    <link href="/css/home.css" rel="stylesheet" />
    <link href="/css/groupDetail.css" rel="stylesheet" />
    <script src="groupDetail.js"></script>
</head>
    <body>
        <!-- Templates -->
        <div id="itemTemplate-RecentPost" data-win-control="WinJS.Binding.Template">
            <div class="item">
                <div class="item-overlay-without-image">
                    <h3 class="item-title win-type-ellipsis" data-win-bind="innerHTML:title"></h3>
                    <p class="item-teaserContent" data-win-bind="innerHTML:teaserContentWithoutImage"></p>
                    <p class="item-author" data-win-bind="innerHTML:author.name"></p>
                    <p class="item-teaserDate" data-win-bind="innerHTML:teaserDate"></p>
                </div>
            </div>
        </div>
        <div id="itemTemplate-Image" data-win-control="WinJS.Binding.Template">
            <div class="item-image" data-win-bind="style.backgroundImage:teaserImageURL">
                <div class="item-overlay">
                    <h3 class="item-image-title win-type-ellipsis" data-win-bind="innerHTML:title"></h3>
                    <p class="item-image-teaserContent" data-win-bind="innerHTML:teaserContent"></p>
                    <p class="item-image-author" data-win-bind="innerHTML:author.name"></p>
                    <p class="item-image-teaserDate" data-win-bind="innerHTML:teaserDate"></p>
                </div>
            </div>
        </div>
       
        <!-- Snapped View Templates -->
        <div id="snapItem" data-win-control="WinJS.Binding.Template">
            <div class="snapItem_wo_image">
                <div class="titleLong win-type-ellipsis" data-win-bind="innerHTML:title"></div>
                <div class="teaserContentLong" data-win-bind="innerHTML:teaserContentSnapped"></div>
                <div class="authorLong" data-win-bind="innerHTML:author.name"></div>
                <div class="teaserDateLong" data-win-bind="innerHTML:teaserDate"></div>
                <div class="clearFloat"></div>
            </div>
        </div>
        <div id="snapItem-image" data-win-control="WinJS.Binding.Template">
            <div class="snapItem">
                <div class="colorAndImageContainer">
                    <div class="snapItem-image" data-win-bind="style.backgroundImage:teaserImageURL"></div>
                </div>
                <div class="title win-type-ellipsis" data-win-bind="innerHTML:title"></div>
                <div class="teaserContent" data-win-bind="innerHTML:teaserContentSnappedImage"></div>
                <div class="author" data-win-bind="innerHTML:author.name"></div>
                <div class="teaserDate" data-win-bind="innerHTML:teaserDate"></div>
                <div class="clearFloat"></div>
            </div>
        </div>

        <div class="groupDetail fragment">
           
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 id="groupHeaderTag" class="titlearea win-type-ellipsis">
                    <span id="groupHeaderContainer">
                        <span id="groupHeaderTitle" class="pagetitle win-type-ellipsis"></span>
                        <span id="groupHeaderTitleChevron" class="pagetitelChevron chevron">&#xe0a1</span>
                    </span>
                    
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <div class="progress-container">
                    <label class="progressRingText">
                        <progress class="win-ring withText" style="width:60px;height:60px;"></progress>
                    </label>    
                </div>
                <div id="errorDiv"></div>
                <!--<div id="snappContainer" style="height: 100%; background-color: green">
                    <div id="snapList" data-win-control="WinJS.UI.ListView"></div>   
                </div>-->
                <div id="fullContainer" style="height: 100%;">
                    <div id="listView" class="groupeditemslist win-selectionstylefilled" data-win-control="WinJS.UI.ListView"></div>                
                </div>
            </section>
             <!-- Define the header menu -->
            <div id="headerMenu" data-win-control="WinJS.UI.Menu" style="font-size: 11pt; font-weight: lighter;">
                <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'recentPostsMenuItem',label:'Collection'}">
                </button>
                <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'offlineMenuItem',label:'Offline'}">
                </button>
                <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'categoriesMenuItem',label:'News'}">
                </button>
                <hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'separator',type:'separator'}" />
                <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'homeMenuItem',label:'Home'}">
                </button>
            </div>
            <div id="appbar" data-win-control="WinJS.UI.AppBar">
                <!--<button 
                    data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}">
                </button>-->
                <button 
                    data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Entfernen vom Offline Speicher',icon:'remove',section:'selection',tooltip:'Entfernen vom Offline Speicher'}">
                </button>
                <button 
                    data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'commandButton',section:'selection'}">
                </button>
            </div> 
        </div>
    </body>
</html>
